<template>
    <div>
        <div style="padding-bottom: 100px;" :class="bgColor">

            <div class="container-fluid">
                <div style="position: relative;height: 80px;line-height: 80px;">
                    <div style="position:absolute;"><a href="javascript:window.history.back();" style="display: inline-block"><img style="width: 30px;" src="../../assets/img/left.png"></a></div>
                    <div style="text-align: center;font-size: 20px;color: #fff;">收款设置</div>
                </div>

                <div style="color: #fff;font-size: 12px;padding: 20px;">
                    风险提示:委托托管属于C2C(顾客与顾客交易,资金不经过平台,平台不会自动扣款,需要您手动自行转账给对方,对方才能收到款项)
                </div>
            </div>


            <div style="position: absolute;background-color: #fff;border-radius: 20px;width: 90%;left: 5%;padding-bottom: 30px;padding-top: 30px;text-align: center">

                <nav-tab style="margin-bottom: 30px;" :data="navData" @handle="handleTab"></nav-tab>


                <div v-show="navData[0].active" style="text-align: center;background-color: #fff">
                    <p style="color: red;">只允许上传一次,请认真上传,禁止修改</p>
                    <div style="width: 80%;border: 1px solid gray;background-color: gray;margin: 0 auto;position: relative">
                        <label for="aliFileInp" style="position:relative;min-height:300px; ">
                            <img style="width: 100%;" :src="aliCode">
                            <input id="aliFileInp" style="opacity: 0;" type="file" ref="aliPic" accept="image/*" @change="chooseImage('ali')">
                        </label>
<!--                        <input style="position: absolute;left: 0;top: 0;" type="file" ref="aliPic" accept="image/*" @change="chooseImage('ali')">-->
                    </div>
<!--                    <div @click="postCollectCode('ali')" style="border-radius: 20px;height: 40px;line-height: 40px;color: #fff;text-align: center;margin: 20px;" :class="bgColor">上传</div>-->
                </div>

                <div v-show="navData[1].active" style="text-align: center;background-color: #fff">
                    <p style="color: red;">只允许上传一次,请认真上传,禁止修改</p>
                    <div style="width: 80%;border: 1px solid gray;background-color: gray;margin: 0 auto;position: relative">
                        <label for="wxFileInp" style="position:relative;min-height:300px; ">
                            <input id="wxFileInp" style="opacity: 0;" type="file" ref="wxPic" accept="image/*" @change="chooseImage('wx')">
                            <img style="width: 100%;" :src="wxCode">
                        </label>
                    </div>
<!--                    <img @click="chooseImage('wx')" style="min-width: 250px;max-width:80%;min-height: 250px;border: 1px solid gray;background-color: gray;" :src="wxCode">-->
<!--                    <div @click="postCollectCode('wx')" style="border-radius: 20px;height: 40px;line-height: 40px;color: #fff;text-align: center;margin: 20px;" :class="bgColor">上传</div>-->
                </div>

                <div v-show="navData[2].active" style="text-align: center;background-color: #fff;font-size:20px;">
                    <input style="width: 80%;border: none;height: 60px;outline: none;margin-bottom: 10px;" v-model="bankcard.real_name" type="text" required placeholder="请输入真实姓名"/>
                    <input style="width: 80%;border: none;height: 60px;outline: none;margin-bottom: 10px;" v-model="bankcard.mobile_number" type="number" required placeholder="请输入手机号码"/>
                    <input style="width: 80%;border: none;height: 60px;outline: none;margin-bottom: 10px;" v-model="bankcard.bank_no" type="number" required placeholder="请输入银行卡号"/>
                    <input style="width: 80%;border: none;height: 60px;outline: none;margin-bottom: 10px;" v-model="bankcard.bank_name" type="text" required placeholder="请输入开户行"/>
                    <div @click="postBankcard" style="border-radius: 20px;height: 40px;line-height: 40px;color: #fff;text-align: center;margin: 20px;" :class="bgColor">保存</div>
                </div>


            </div>



        </div>

    </div>
</template>
<script>
    import NavTab from "../Widget/NavTab";
    import swal from "sweetalert";
    export default {
        components: {NavTab},
        data() {
            return {
                navData: [
                    {
                        'label': '支付宝',
                        'active': true,
                    },
                    {
                        'label': '微信',
                        'active': false,
                    },
                    {
                        'label': '银行卡',
                        'active': false,
                    },
                ],
                bgColor: 'ali-bg',
                aliCode: '',
                wxCode: '',
                bankcard: {
                    real_name: '',
                    mobile_number: '',
                    bank_no: '',
                    bank_name: '',
                },
                allowAliCodePost: true,
                allowWxCodePost: true,
                allowBankPost: true,
            }
        },
        created() {

        },
        mounted() {
            // this.postWxConfig();
            this.getCollectCode();
        },
        methods: {
                chooseImage(t) {
                let that = this;
                let reads = new FileReader();
                if (t == 'ali') {
                    let f = this.$refs.aliPic.files[0];
                    reads.readAsDataURL(f);
                    reads.onload = function (e) {
                        // 8.23 直接上传
                        that.aliCode = e.target.result;
                        that.api.postCollectCode(that.aliCode, 3).then(res => {
                            if (res.meta.code == '000') {
                                swal("上传成功");
                                that.allowAliCodePost = false;
                            }
                        });
                    };
                }
                if (t == 'wx') {
                    let f = this.$refs.wxPic.files[0];
                    reads.readAsDataURL(f);
                    reads.onload = function (e) {
                        that.wxCode = e.target.result;
                        // 8.23 直接上传
                        that.api.postCollectCode(that.wxCode, 4).then(res => {
                            if (res.meta.code == '000') {
                                swal("上传成功");
                                that.allowWxCodePost = false;
                            }
                        })
                    };
                }
            },
            getCollectCode() {
                let that = this;
                this.api.getCollectCode(this.aliCode, 3).then(res => {
                    if (res.data.ali_code) {
                        that.aliCode = res.data.ali_code;
                        that.allowAliCodePost = false;
                    }
                    if (res.data.wx_code) {
                        that.wxCode = res.data.wx_code;
                        that.allowWxCodePost = false;
                    }
                    if (res.data.bankcard) {
                        that.bankcard = res.data.bankcard;
                        that.allowBankPost = false;
                    }
                })
            },
            postWxConfig() {
                this.api.postWxConfig(this.$route.fullPath).then(res => {
                    if (res.data) {
                        // res.data.debug = true;
                        res.data.jsApiList.push('chooseImage');
                        // console.log(res.data);
                        wx.config(res.data);
                        wx.ready(function(){
                            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                            console.log('js api success.');
                        });
                        wx.error(function(res){
                            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                            console.log(res);
                        });
                    }
                })
            },
            handleTab(datum) {
                if (datum.label == '微信') {
                    this.bgColor = 'wx-bg';
                }
                if (datum.label == '支付宝') {
                    this.bgColor = 'ali-bg';
                }
                if (datum.label == '银行卡') {
                    this.bgColor = 'bank-bg';
                }
            },
            chooseImage1(type) {
                let that = this;
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original',], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', ], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

                        wx.uploadImage({
                            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                            }
                        });


                        // console.log(localIds);
                        // wx.getLocalImgData({
                        //     localId: localIds[0], // 图片的localID
                        //     success: function (res) {
                        //         // localData是图片的base64数据，可以用img标签显示
                        //         if (type == 'ali') {
                        //             that.aliCode = res.localData;
                        //         }
                        //         if (type == 'wx') {
                        //             that.wxCode = res.localData;
                        //         }
                        //     }
                        // });
                    }
                })
            },
            postBankcard() {
                // if (!this.allowBankPost
                if (this.bankcard.real_name == ''
                    || this.bankcard.bank_no == ''
                    || this.bankcard.bank_name == ''
                    || this.bankcard.mobile_number == ''
                ) {
                    return;
                }
                this.api.postBankcard(this.bankcard).then(res => {
                    if (res.meta.code == '000') {
                        swal("保存成功");
                        that.allowBankPost = false;
                    }
                })
            },
            postCollectCode(type) {
                let that = this;
                if (type == 'ali') {
                    if (!this.allowAliCodePost) {
                        return;
                    }
                    if (!this.aliCode) {
                        swal("请点击二维码区域选择图片");
                        return;
                    }
                    this.api.postCollectCode(this.aliCode, 3).then(res => {
                        if (res.meta.code == '000') {
                            swal("上传成功");
                            that.allowAliCodePost = false;
                        }
                    })
                }
                if (type == 'wx') {
                    if (!this.allowWxCodePost) {
                        return;
                    }
                    if (!this.wxCode) {
                        swal("请点击二维码区域选择图片");
                        return;
                    }
                    this.api.postCollectCode(this.wxCode, 4).then(res => {
                        if (res.meta.code == '000') {
                            swal("上传成功");
                            that.allowWxCodePost = false;
                        }
                    })
                }

            }
        },
    }
</script>
<style>
    .ali-bg {
        background-color: #00a0e9;
    }
    .wx-bg {
        background-color: #2eaa6a;
    }
    .bank-bg {
        background-color: #e64d40;
    }


</style>
